<template>
	<view class="content">
		<u-navbar
			title="常见问题" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<scroll-view scroll-y enable-back-to-top show-scrollbar="false"
			:style="{height: `calc(100vh - ${navHeight}px)`}">
			<view class="ab_content" :style="{paddingBottom: '${bottomHeight}px'}">
				<view class="title">{{data.title}}</view>
				<rich-text :nodes="data.content" v-if="data.content" style="text-align: justify;"></rich-text>
			</view>	
		</scroll-view>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { getFaq } from '@/api';
	
	const regex = new RegExp('img', 'gi');

	export default {
		mixins: [systemInfo],
		data() {
			return {
				data: {}
			}
		},
		onLoad({id}) {
			this.getSystemInfo();
			this.loadDetail(id);
		},
		methods: {
			async loadDetail(id) {
				const res = await getFaq(id);
				this.data = res.data;
				// #ifdef MP || APP-PLUS
				let info = uni.getSystemInfoSync();
				var screenWidth = info.safeArea.width || info.screenWidth;
				screenWidth += 'px';
				// #endif
				
				// #ifdef H5
				var screenWidth = '100%';
				// #endif
				
				// 设置图片宽度
				let rep = `<img style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
				this.data.content = this.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
					return rep + ' src="' + capture + '"/>';
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	background-color: #fff;
	overflow: hidden;
}

.ab_content {
	padding: 20px 10px 78px;
	background-color: #fff;
	
	.title {
		font-weight: bold;
		font-size: 16px;
		text-align: justify;
		margin-bottom: 20px;
	}
}
</style>
